<template>
  <view class="container">
    <u-toast ref="UToastRef"></u-toast>
    <view class="form" v-if="show">
      <view class="title">登录</view>
      <view>
        <u--form
            labelPosition="left"
            :model="loginReg"
            :rules="loginRules"
            ref="loginForm"
            labelWidth="100"
        >
          <u-form-item
              label="用户名"
              prop="username"
              ref="username"
          >
            <u--input
                v-model="loginReg.username"
            ></u--input>
          </u-form-item>
          <u-form-item
              label="密码"
              prop="password"
              ref="password"
          >
            <u--input
                type="password"
                password
                v-model="loginReg.password"
            ></u--input>
          </u-form-item>
        </u--form>
        <up-button type="primary" @click="submit(0)" text="登录"></up-button>
        <view class="go-register" @tap="show = !show">去注册</view>
      </view>

    </view>
    <view class="form" v-else>
      <view class="title">注册</view>
      <view>
        <u--form
            labelPosition="left"
            :model="registerReg"
            :rules="registerRules"
            ref="registerForm"
            labelWidth="120"
        >
          <u-form-item
              label="用户名"
              prop="username"
              ref="username"
          >
            <u--input
                v-model="registerReg.username"
            ></u--input>
          </u-form-item>
          <u-form-item
              label="密码"
              prop="password"
              ref="password"
          >
            <u--input
                type="password"
                password
                v-model="registerReg.password"
            ></u--input>
          </u-form-item>
          <u-form-item
              label="确认密码"
              prop="checkPassword"
              ref="checkPassword"
          >
            <u--input
                type="password"
                password
                v-model="registerReg.checkPassword"
            ></u--input>
          </u-form-item>
          <u-form-item
              label="账号类型"
              prop="type"
              ref="type"
          >
            <u-radio-group
                size="36"
                name="1"
                v-model="registerReg.type"
                placement="row"
            >
              <u-radio
                  :name="1"
                  label="客户"
                  labelSize="24"
              >
              </u-radio>
              <u-radio
                  :name="2"
                  label="商家"
                  labelSize="24"
              >
              </u-radio>
            </u-radio-group>
          </u-form-item>
        </u--form>
        <up-button type="primary" @click="submit(1)" text="注册"></up-button>
        <view class="go-register" @tap="show = !show">去登录</view>
      </view>

    </view>
    <view class="glass"></view>
  </view>
</template>

<script setup lang="ts">
import {ref} from "vue";
import type {LoginReqVO, RegisterReqVO} from "@/interfaces/user";
import {useLoginApi, useRegisterApi} from "@/services/api";
import {useStore} from "vuex";

const show = ref<boolean>(true)
const store = useStore()
const loginForm = ref()
const registerForm = ref()
const UToastRef = ref()
const loginReg = ref<LoginReqVO>({
  password: "",
  username: ""
})
const registerReg = ref<RegisterReqVO>({
  password: "",
  username: "",
  checkPassword: "",
  type: 0
})
const loginRules = ref({
  'username': {
    type: 'string',
    required: true,
    message: '请输入用户名',
    trigger: ['blur', 'change']
  },
  'password': {
    type: 'string',
    required: true,
    message: '请输入密码',
    trigger: ['blur', 'change']
  }
})
const registerRules = ref({
  'username': {
    type: 'string',
    required: true,
    message: '请输入用户名',
    trigger: ['blur', 'change']
  },
  'password': {
    type: 'string',
    required: true,
    message: '请输入密码',
    trigger: ['blur', 'change']
  },
  'checkPassword': {
    validator: (rule: any, value: string, callback: any) => {
      if (value !== registerReg.value.password) {
        callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    },
    required: true,
    trigger: ['blur', 'change']
  },
  'type': {
    validator: (rule: any, value: number, callback: any) => {
      if (!value) {
        callback(new Error('请选择用户类型'))
      } else {
        callback()
      }
    },
    required: true,
    trigger: ['blur', 'change']
  }
})
const submit = (index: number) => {
  console.log(index)
  if (index) {
    registerForm.value.validate().then(async () => {
      const {data: res} = await useRegisterApi(registerReg.value)
      UToastRef.value.show({
        message:'登录成功',
        type:'success',
        complete: () => {
          show.value = !show.value
        }
      })
    }).catch((res: any) => {
      uni.$u.toast(res[0].message)
    })
  } else {
    loginForm.value.validate().then(async () => {
      const {data: res} = await useLoginApi(loginReg.value)
      await store.dispatch('auth/setUserId',res.id)
      await store.dispatch('auth/setToken',res.token)
      await store.dispatch('auth/setUsername',res.username)
      await store.dispatch('auth/setWallet',res.wallet)
      await store.dispatch('auth/setType',res.type)
      await store.dispatch('auth/setIsLogin',true)
      UToastRef.value.show({
        message:'登录成功',
        type:'success',
        complete: () => {
          uni.navigateBack()
        }
      })
    }).catch((res: any) => {
      uni.$u.toast(res[0].message)
      console.log(res)
    })
  }

}
</script>


<style scoped lang="scss">
.container {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;

  &:before {
    content: '';
    position: absolute;
    top: -45vw;
    right: -45vw;
    width: 100vw;
    height: 100vw;
    background-color: rgba(44, 64, 90, 1);
    border-radius: 50%;
    z-index: -2;
  }

  &:after {
    content: '';
    position: absolute;
    bottom: -45vw;
    left: -45vw;
    width: 100vw;
    height: 100vw;
    background-color: rgba(90, 64, 44, 1);
    border-radius: 50%;
    z-index: -2;
  }

  .glass {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-filter: blur(100px);
    z-index: -1;
  }

  .form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 400rpx;
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    .title {
      font-size: 36rpx;
    }

    .go-register {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-top: 10px;
      color: #999999;
    }
  }
}
</style>
